<template>
    <div>
         <city-header></city-header>
         <city-list :cities="cities" :hot="hotCities" :letter="letter"></city-list>
         <city-alphabet :cities="cities" @change="handleLetterChange"></city-alphabet>
         <city-search :cities="cities"></city-search>
    </div>
</template>

<script>
import  axios  from  'axios'
import  CityHeader from './components/Header'
import  CityList from './components/List'
import  CityAlphabet from './components/Alphabet'
import  CitySearch from './components/Search'

export default {
    name:'City',
    components:{
        CityHeader,
        CityList,
        CityAlphabet,
        CitySearch  
    },
    data (){
        return{
          cities: {} ,
          hotCities: [],
          letter:''
        }
    },
    methods:{
        getCityInfo(){
            axios.get('/mock/city.json')
                .then(this.handleGetCityInfoSucc)
    },
    handleGetCityInfoSucc (res) {
     
      res = res.data
      if(res.ret && res.data){
        const data = res.data
        this.cities = data.cities
        this.hotCities = data.hotCities
      }
    },
       handleLetterChange (letter) {
             this.letter = letter
         }
    },
     mounted () {
            this.getCityInfo()
       }
    }

</script>

<style scoped>

</style>
